ol, ul {
    list-style: none
}

.content-box {
    width: 1210px;
    margin: 0 auto;
    min-height: 900px;
}

.content-box{
    width:1210px;
    margin:0 auto;
    min-height: 900px;
}

.robot {
    position:relative;
    width:108px;
    height:86px;
    display: flex;
    justify-content: center;
    align-items: center;
    left:87%;
    top:736px;
}

.robot .robot-container {
    animation: float 2s ease infinite alternate;
}

.robot .robot-notice-box {
    width:199%;
    font-family: 'Microsoft YaHei', cursive;
    color: #e05887;
    position: absolute;
    top:-118px;
    left:-44px;
    /*transform: rotateZ(-10deg);*/
    /*animation: moveRobotBox 5s ease-in-out infinite;*/
    background: #fff;
    border-radius: 8px;
    padding: 5px 10px;
    /*animation: moveRobotText 5s ease-in-out infinite;*/
    box-shadow: 0 0 15px #222;
    display: none;
}

.robot .robot-notice-box h1 {
    font-size: 14px;
    color: #4f506e;
    font-weight: bold;
    padding: 6px 0;
}

.robot .robot-notice-box p {
    font-size: 13px;
    color: #4f506e;
}

.robot .robot-notice-box .robot-text {
    background: #fff;

    font-size: 1.5rem;
}

.robot .robot-notice-box::before {
    width: 0;
    height: 0;
    content: '';
    border-top: .5em solid #fff;
    border-left: .5em solid transparent;
    border-right: .5em solid transparent;
    position: absolute;
    bottom: -8px;
    left: 110px;
    transform: rotateZ(0deg);
}

.robot .robot-box {
    position: absolute;
    top: 0;
}

.robot .robot-box .head {
    height:34px;
    width:41px;
    position: absolute;
    top: 0;
    left: 0;
    background: url("../image/head.png") no-repeat top center;
}

.robot .robot-box .pregnancy {
    position: absolute;
    left:-8px;
    top:30px;
    z-index: 1;
    width:59px;
    height:40px;
    background: url("../image/pregnancy.png") no-repeat;
}
.robot .robot-box .pregnancy .pregnancy-clothes{
    position: absolute;
    left:46px;
    top:-13px;
    width:33px;
    height:66px;
    background: url("../image/zhongqiu/zhongqiu.png");
    background-size: 100% 100%;
}
.robot .robot-box .ripple {
    position: absolute;
    top:9px;
    left:5px;
    width:36px;
    height:7px;
}
.ripple span {
    display: block;
    background: rgba(1,202,240,0.3);
    width:1px;
    height: 10%;
    /*border-radius: 14px;*/
    margin-right:1px;
    float: left;
    margin-top: 25%;
    position: relative;
}
.ripple span::before{
    display: block;
    width:1px;
    height:100%;
    content: '';
    position: absolute;
    background: rgba(1,202,240,0.3);margin-left:1px;}
.ripple span:last-child {
    margin-right: 0px;
}
.ripple span:nth-child(1) {
    height: 2%;
    animation: load 2.5s 1.4s infinite linear;
}
.ripple span:nth-child(1)::before{
    top:-3px;
}
.ripple span:nth-child(2) {
    animation: load 2.5s 1.2s infinite linear;
    margin-bottom: -2px;
}
.ripple span:nth-child(2)::before{
    top:-3px;
}
.ripple span:nth-child(3) {
    animation: load 2.5s 1s infinite linear;
}
.ripple span:nth-child(3)::before{
    top:3px;
}

.ripple span:nth-child(4) {
    animation: load 2.5s 0.8s infinite linear;
}
.ripple span:nth-child(4)::before{
    top:3px;
}
.ripple span:nth-child(5) {
    animation: load 2.5s 0.6s infinite linear;
}
.ripple span:nth-child(5)::before{
    top:-3px;
}
.ripple span:nth-child(6) {
    animation: load 2.5s 0.4s infinite linear;
}
.ripple span:nth-child(6)::before{
    top:-3px;
}
.ripple span:nth-child(7) {
    animation: load 2.5s 0.2s infinite linear;
}
.ripple span:nth-child(7)::before{
    top:-3px;
}
.ripple span:nth-child(8) {
    animation: load 2.5s 0s infinite linear;
}
.ripple span:nth-child(8)::before{
    top:3px;
}
.ripple span:nth-child(9) {
    animation: load 2.5s 0.2s infinite linear;
}
.ripple span:nth-child(9)::before{
    top:-3px;
}
.ripple span:nth-child(10) {
    animation: load 2.5s 0.4s infinite linear;
}
.ripple span:nth-child(10)::before{
    top:3px;
}
.ripple span:nth-child(11) {
    animation: load 2.5s 0.6s infinite linear;
}
.ripple span:nth-child(11)::before{
    top:-3px;
}
.ripple span:nth-child(12) {
    animation: load 2.5s 0.8s infinite linear;
}
.ripple span:nth-child(12)::before{
    top:-3px;
}
.ripple span:nth-child(13) {
    animation: load 2.5s 1s infinite linear;
}
.ripple span:nth-child(13)::before{
    top:-3px;
}
.ripple span:nth-child(14) {
    animation: load 2.5s 1.2s infinite linear;
}
.ripple span:nth-child(14)::before{
    top:-3px;
}
.ripple span:nth-child(15) {
    animation: load 2.5s 1.4s infinite linear;
}
.ripple span:nth-child(15)::before{
    top:-3px;
}

@keyframes load {
    0% {
        background: rgba(1,202,240,0.3);
        margin-top: 25%;
        height: 10%;
    }

    50% {
        background: rgba(1,202,240,0.5);
        height: 100%;
        margin-top: 0%;
    }

    100% {
        background: rgba(1,202,240,0.3);
        height: 10%;
        margin-top: 25%;
    }
}

.robot:hover .robot-notice-box {
    display: block;
    animation: fadeIn 1s;
}

.robot:hover .head {
    animation: shake .5s infinite linear alternate;
}
@keyframes ripple{
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 600% 0%;
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0
    }
    10% {
        opacity: 0.1
    }
    40% {
        opacity: 0.4
    }
    80% {
        opacity: 0.8
    }
    100% {
        opacity: 1
    }
}

@keyframes float {
    0% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes shake {
    0% {
        transform: translateX(0%) rotateZ(-14deg);
        transform-origin: bottom center;
    }
    100% {
        transform: translateX(0%) rotateZ(14deg);
        transform-origin: bottom center;
    }
}

@keyframes moveRobotText {
    0%, 20%, 40%, 60%, 80%, 100% {
        transform: translateX(20px);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-20px);
    }
}

/*@keyframes fly-away-acton {*/
/*from {*/
/*top: 49px;*/
/*width: 218px;*/
/*height: 224px;*/
/*opacity: 1;*/
/*}*/
/*to {*/
/*top: 0;*/
/*width: 10px;*/
/*height: 15px;*/
/*opacity: 0;*/
/*}*/
/*}*/


/*@keyframes fly-back-action {*/
/*from {*/
/*top: 0;*/
/*width: 10px;*/
/*height: 15px;*/
/*opacity: 0;*/
/*}*/
/*to {*/
/*top: 49px;*/
/*width: 218px;*/
/*height: 224px;*/
/*opacity: 1;*/
/*}*/
/*}*/
@keyframes move_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.55)
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1)
    }
}
.waveWrapper {
    overflow: hidden;
    height: 48px;
    width:30px;
    position: absolute;
    top:-23px;
    left:5px;
}
.waveWrapperInner {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 100%;
    bottom: -1px;
}
.bgMiddle {
    z-index: 10;
}
.wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom;
}
.waveMiddle {
    background-size: 50% 18px;
}
.waveAnimation .waveMiddle {
    animation: move_wave 10s linear infinite;
}
#iframe_window_chat{
    position: absolute;
    width: 100%;
    height: 656px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
}